<template>
	<view class="content">
		<view class="card-item activity">
			<view class="title">数据面板</view>

			<view class="card-item-content uni-flex uni-row number-orders">
				<view class="list-item" style="margin-bottom:50rpx;">
					<view class="num">{{direct_count}}<text class="unit">kg</text></view>
					<view class="text">日重量</view>
				</view>
				<view class="list-item" style="margin-bottom: 50rpx;">
					<view class="num">{{distribution_count}}<text class="unit">kg</text></view>
					<view class="text">周重量</view>
				</view>
				<view class="list-item" style="margin-bottom: 50rpx;">
					<view class="num">{{income}}<text class="unit">kg</text></view>
					<view class="text">月重量</view>
				</view>
				<view class="list-item" style="margin-bottom: 40rpx;">
					<view class="num">{{grade.active_statistics[0].statistics.income}}<text class="unit">元</text></view>
					<view class="text">日回收额</view>
				</view>

				<view class="list-item" style="margin-bottom: 40rpx;">
					<view class="num">{{grade.active_statistics[0].statistics.income}}<text class="unit">元</text></view>
					<view class="text">围回收额</view>
				</view>

				<view class="list-item" style="margin-bottom: 40rpx;">
					<view class="num">{{grade.active_statistics[0].statistics.income}}<text class="unit">元</text></view>
					<view class="text">月回收额</view>
				</view>
			</view>
		</view>



		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					开始时间：
				</view>
				<view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>

				</view>
				<view>至</view>
				<view class="uni-list-cell-left">
					结束时间：
				</view>
				<view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>

				</view>


			</view>
		</view>
		<view class="tab-title">
			<text>回收金额</text>
			<text>回收重量</text>
			<text>回收时间</text>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" @scrolltolower="lowerBottom" scroll-y>
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>


					<!-- 订单列表 -->
					<view class="t rank">
						<view v-for="(item,index) in tabItem.orderList" :key="index" class="order-item">

							<li class="t_01">
								<view class="t_01_1 flex">
									<!-- 		<text class="mc">{{index+1}}</text> -->
									<text>{{type==1?item.user.user_name:item.id}}</text>
								</view>
								<view class="t_01_1 price" style="width: 60%;">
									{{item.ctime}}
								</view>

								<view class="t_01_1 price">
									¥{{type==1?item.price:item.value}}
								</view>
							</li>
						</view>
					</view>

					<!-- <view class="t rank">
						<block v-for="(item,index) of orderList" :key="index">
							<li class="t_01">
								<view class="t_01_1 flex">
									<text class="mc">{{index+1}}</text>
									<text>{{item.user.user_name}}</text>
								</view>
								<view class="t_01_1 price">
									<text>收入金额：</text>
									¥{{item.price}}
								</view>
							</li>
						</block>
					</view> -->


					<view class="middle" v-if="showMore">
						{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="block"></view>

	</view>
</template>
<script>
	import customTabBar from "@/components/customTabBar/index.vue"
	export default {
		components: {
			customTabBar
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isHhrgz: false,
				isHhrgz1: false,
				user: {
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，点击登录账户',
					tags: '普通用户',
					grade_id: 0,
					balance: '--',
					id: ''
				},
				renderImage: false,
				productPage: 0,
				direct_count: 0,
				distribution_count: '-',
				income: 0,
				grade: {},
				loadAll: false,
				member: true,
				token: '',

				showMore: false,
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了!'
				},
				tabCurrentIndex: 0,
				navList: [{
					status: 1,
					text: '直推订单',
					orderList: []
				}],
				date: currentDate,
			}
		},
		onLoad() {

			// this.loadData()
		},
		onShow() {
			this.token = uni.getStorageSync("token");
			if (this.token) {
				this.$api.http.get('user-info', {}).then(res => {
					if (res.code == 1) {
						var userInfo = res.data.member;
						var order_static = res.data.order_static;
						if (userInfo.user_name == "") {
							this.user.user_name = "请设置用户名"
						} else {
							this.user.user_name = userInfo.user_name;
						}
						this.user.id = userInfo.id
						this.user.grade_id = userInfo.grade_id
						this.user.special = userInfo.special
						this.direct_count = order_static.direct_count
						this.distribution_count = order_static.distribution_count
						this.income = order_static.income
						this.grade = res.data.grade
						this.user.balance = userInfo.price
						if (userInfo.head_img) {
							// #ifdef MP
							this.user.profile = userInfo.head_img;
							// #endif
						}

					}
				})
			} else {
				this.user = {
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，点击登录账户',
					tags: '普通用户',
					grade_id: 0,
					balance: '--',
					id: ''
				}
			}

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				console.log(e)
				this.date = e.detail.value
			},

			todistribution() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/distribution2/index'
					})
				} else {
					this.toLogin();
				}
			},

			intention() {
				if (this.token) {
					uni.navigateTo({
						url: '/packagePages/tabBar/user/intention'
					})
				} else {
					this.toLogin();
				}
			},

			todistributionYq(state) {
				console.log(state)
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/yq?state=' + state
					})
				} else {
					this.toLogin();
				}
			},
			todistributionZt() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/zt'
					})
				} else {
					this.toLogin();
				}
			},
			todistributionSy(type) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/sy?type=' + type
					})
				} else {
					this.toLogin();
				}
			},

			qysy(type) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/qy?type=' + type
					})
				} else {
					this.toLogin();
				}
			},

			toMsg() {
				uni.navigateTo({
					url: '/pages/user/message/index'
				})
			},
			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});
				// uni.setStorageSync("path", '/pages/tabBar/user/user')
				setTimeout(() => {
					uni.navigateTo({
						url: '../../login/login?path=/pages/tabBar/user/user'
					})
				}, 700)

			},
			toOrderList(index) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/order/index?status=' + index
					})
				} else {
					this.toLogin();
				}
			},


			toSetting() {
				if (this.token) {
					uni.navigateTo({
						url: '../../user/setting/setting'
					})
				} else {
					this.toLogin();
				}
			},

			toPage(url) {

				if (url == '/pages/user/account/index' || url == '/pages/user/address/index' || url ==
					'/pages/user/feedback/feedback' || url == '/packagePages/tabBar/user/check-in') {
					if (this.token) {
						uni.navigateTo({
							url: url
						})
					} else {
						this.toLogin();
					}
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}

	}
</script>
<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.top_title {
		overflow: hidden;
		line-height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 9;
		padding-bottom: 30rpx;

		.fl {
			display: flex;
			align-items: center;

			.icon {
				width: 6rpx;
				height: 28rpx;
				background: #222;
				margin-right: 15rpx;
			}

			text {
				font-size: 34rpx;
				color: #222222;
				font-weight: bold;
			}
		}

		.fr {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999;

			i {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #999;
				font-weight: bold;
			}
		}
	}

	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
			/* 放大1.5倍 */
		}
	}

	.card-item {
		// background-color: #fff;
		border-radius: 15upx;
		margin: -80rpx 20rpx 20rpx;
		text-align: center;
		z-index: 1;

		.top_title {
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;

			text {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.btn {
				font-size: 26rpx;
				background: #21A56C;
				color: #fff;
				padding: 6rpx 25rpx;
				border-radius: 30rpx;
				font-weight: normal;
			}
		}

		.icon-wrap {
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: top;
				margin-bottom: 10rpx;
			}

		}


	}

	.list-item {

		width: 33.333%;
	}

	.card-item.recommend {
		padding-bottom: 30rpx;
		margin: 20rpx;

		.card-item-content {

			text {
				display: block;
				color: #21A56C;
				font-size: 40rpx;
			}
		}

		.submit-btn {
			width: 75%;
			height: 80rpx;
			border-radius: 80rpx;
			color: #fff;
			background-color: #21A56C;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
		}
	}

	.submit-btn2 {
		width: 30%;
		height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background-color: #21A56C;
		// font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		// margin: 0 auto;
		float: right;
	}


	/*通用 */

	.uni-flex {
		display: flex;
		flex-direction: row;
	}

	.uni-flex-item {
		flex: 1;
	}

	.uni-row {
		flex-direction: row;
	}

	$item-margin-bottom: 30upx;
	$item-margin-side: 20upx;
	$line-color: #f9f9f9;
	$border-color: #aa833e;

	.header {
		color: #282a30;
		background-color: #ebf9f9;
		background-position: bottom;
		padding: 45rpx 4% 45rpx;
		top: 0;
		width: 92%;
		z-index: 99;
		/*  #ifdef  APP-PLUS  */
		padding-top: 80rpx;

		/*  #endif  */
		.img-profile {
			margin-right: 30upx;
			position: relative;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				vertical-align: middle;
			}

			.member {
				position: absolute;
				bottom: -10rpx;
				right: 0;
				left: 0;
				margin: 0 auto;

				image {
					width: 140rpx;
					border-radius: 0;
				}
			}
		}

		.usertag {
			padding: 0 20upx;
			background-color: #bb965f;
			border-radius: 30upx;
			font-size: 24upx;
			margin-right: 20upx;
			border: 1px solid #bb965f;
			line-height: 1.6;
		}

		.usertag.login {
			background-color: inherit;
			border: 0;
			padding: 0;
		}

		.nikename {
			font-size: 30rpx;
			position: relative;
			font-weight: bold;

			.usertag {
				position: absolute;
				top: 10rpx;
				right: 0;
				line-height: 32rpx;
				padding: 0 15rpx;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			position: absolute;
			top: 40rpx;
			/*  #ifdef  APP-PLUS  */
			top: 80upx;
			/*  #endif  */
			right: 4%;
			z-index: 999;

			.icon {
				color: #090b0e;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
				margin-left: 15rpx;
			}
		}
	}


	.card-item {
		// background-color: #fff;
		border-radius: 15upx;
		margin: 20upx;
		text-align: center;
		z-index: 1;

		.icon-wrap {
			position: relative;

			image {
				width: 70rpx;
				height: 70rpx;
				vertical-align: top;
				margin-bottom: 10rpx;
			}

		}


	}

	.activity {
		background: #fff;
		margin: 20rpx;
		padding: 30rpx;
		box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);

		.uni-flex {
			flex-wrap: wrap;
		}

		.title {
			margin-bottom: 50rpx;
			text-align: left;
			font-weight: bold;
		}

		.activity-list {
			flex: 0 0 calc((100% - 180rpx)/3);
			margin: 10rpx;
			background: #fafafb;
			border-radius: 20rpx;
			padding: 20rpx;
		}
	}


	.number-orders {
		.num {
			color: #424448;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 1.5;

			.unit {
				font-size: 22rpx;
				font-weight: normal;
			}
		}

		.text {
			margin-top: 10rpx;
			color: #c3c7ce;
			font-size: 28rpx;
		}
	}

	.service {
		text-align: left;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 40rpx 30rpx 60rpx 30rpx;

		.item {
			width: 100%;
			text-align: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #e8eaeb;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			.icon-wrap {
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				view {
					font-size: 26rpx;
				}

			}

			i {
				font-size: 26rpx;
				color: #b5b8c1;
			}
		}

	}

	.block {
		height: 130rpx;
	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 20%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-dialog.two {
		top: 30%;
	}

	.modal-content {
		text-align: left;
		line-height: 20rpx;
		padding: 40rpx;
		font-size: 16rpx;

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			font-weight: bold;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 10rpx;
			line-height: 1.5;
		}

		view.bold {
			font-weight: bold;
		}

		button {
			width: 85%;
			height: 75rpx;
			line-height: 75rpx;
			border-radius: 60rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(135deg, #42d09d, #3bc7b3);
			padding: 0;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				margin: 36rpx 0 0;
				width: 48%;
				border: 1px solid #21A56C;
			}

			.close {
				background: #fff;
				color: #21A56C;
			}
		}
	}

	.heignt {
		height: 160rpx;
		width: 100%;
	}

	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 0 20rpx;
		z-index: 990;
		border-top: 1px solid #eee;
		box-sizing: border-box;

		.btn {
			width: 45%;
			height: 75rpx;
			border-radius: 75rpx;
			background: #fff;
			border: 1px solid #21A56C;
			color: #21A56C;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
		}

		.btn.two {
			background: #21A56C;
			color: #ffffff;
		}
	}

	.uni-list-cell {
		margin: 20rpx;
		overflow: hidden;
		background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		justify-content: space-between; // 为了让两边对齐

	}
	.tab-title {
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		font-size: 26rpx;
		background: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 15rpx;
	}
	
</style>